<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">流程分配</div>
        </div>
        <div class="widget-body  am-fr">
          <customer-toolbar ref="toolbar"  class="toolbar" @search="handleFind"
                            areaTeam needInitSearch
          ></customer-toolbar>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-fl">
            <button @click="handleAdd" type="button" class="btn-search am-btn am-btn-default am-btn-success">
              新建
            </button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%">
              <el-table-column
                prop="areaTeamName"
                min-width="160"
                label="区域">
              </el-table-column>
              <el-table-column
                prop="operatorName"
                min-width="160"
                label="最后操作人">
              </el-table-column>
              <el-table-column
                min-width="160"
                label="操作时间">
                <template scope="scope">
                  <div>
                    {{scope.row.updateTime | formatTime}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作">
                <template scope="scope">
                  <el-button v-if="hasPermission('edit')" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                        @paging="loadTableData"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import Pagination from '../base/Pagination.vue'
  import CustomerToolbar from './CustomerToolbar.vue'
  import moment from 'moment'

  export default{
    data:function(){
      return {
        total: 0,
        pageSize: 10,
        pageNo: 1,
        tableData: [],
      }
    },
    components: {
      Pagination, CustomerToolbar
    },
    watch: {

    },
    computed: {

    },
    mounted :function(){
      $(window).smoothScroll()
//      this.loadTableData()
    },
    methods:{
      handleEdit(row) {
        if (row.workSetupTemplateId) {
          this.$router.push('/main/crm/configSet?info=' + JSON.stringify(row))
        }
      },
      handleAdd() {
        this.$router.push('/main/crm/configSet?areaTeamId=' + this.$refs.toolbar.query.areaTeamId)
      },
      handleFind(data) {
        this.formData = this.formatData(data)
        this.loadTableData()
      },
      loadTableData: function () {
        this.$showLoading()
        io.post(io.workSetupTemplate, this.formData, (ret) => {
          this.$hiddenLoading()
          if (ret.success) {
            this.tableData = ret.data
            this.tableData.map(val => {
              val.areaTeamName = this.formData.areaTeamName
            })
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      formatData(data) {
        return {
          areaTeamId: data.areaTeamId,
          areaTeamName: data.areaTeamName,
        }
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
